<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>查看成绩</title>
    <link rel="stylesheet" href="/lims/layui/css/layui.css?20190817.1">
    <link href="/css/exam/main.css" rel="stylesheet" type="text/css" />
    <link href="/css/exam/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="/css/exam/test.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/common.css">
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js/"></script>
    <script src="/lib/layui/layui/js/baseCode/base.js?v=2019080920:09" type="text/javascript" charset="utf-8"></script>
    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color:#fff;
        }
        .test_main{
            width: 100%;
            display: flex;
            flex-direction: row;
        }
        .nr_left{
            width: 80%;
        }
        .nr_right{
            width: 20%;
        }
        .main{
            width: 90%;
            margin: 0 auto;
        }
        .nr_left {
            width: 72%;
        }
    </style>

</head>
<body>
<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="" method="post">

                    <div class="test_content single" id="single">
                        <div class="test_content_title">
                            <h2>单选题</h2>
                        </div>
                    </div>
                    <div class="test_content_nr list1">
                        <ul>


                        </ul>
                    </div>

                    <div class="test_content multiple" id="multiple">
                        <div class="test_content_title">
                            <h2>多选题</h2>
                        </div>
                    </div>
                    <div class="test_content_nr list2">
                        <ul>


                        </ul>
                    </div>

                    <div class="test_content judge" id="judge">
                        <div class="test_content_title">
                            <h2>判断题</h2>

                        </div>
                    </div>
                    <div class="test_content_nr list3">
                        <ul>



                        </ul>
                    </div>

                    <div class="test_content blanks" id="blanks">
                        <div class="test_content_title">
                            <h2>填空题</h2>

                        </div>
                    </div>
                    <div class="test_content_nr list4">
                        <ul>


                        </ul>
                    </div>

                    <div class="test_content objective" id="objective">
                        <div class="test_content_title">
                            <h2>客观题</h2>
                        </div>
                    </div>
                    <div class="test_content_nr list5">
                        <ul>

                        </ul>
                    </div>

                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1 style="width: 280px;background: #5d9cec;">
                            <i class="" style="font-size: 18px;font-weight: bold;">总分：</i><b class="alt-1 grade" style="font-size: 18px;"></b>
                        </h1>
                    </div>
                    <div class="rt_nr1_title">
                       <div>
                           <h1>
                               <i class="icon iconfont"></i>答题卡
                           </h1>
                       </div>
                        <p class="test_time">
                            <b class="alt-1 time" style="font-size: 12px; width: 140px;color: black;margin-left: 2px;">00:00:00</b>
                        </p>
                    </div>

                    <div class="rt_content single">
                        <div class="rt_content_tt">
                            <h2>单选题</h2>
                        </div>
                        <div class="rt_content_nr answerSheet answer1">
                            <ul>

                                <li><a href="#qu_0_0"></a></li>


                            </ul>
                        </div>
                    </div>

                    <div class="rt_content multiple">
                        <div class="rt_content_tt">
                            <h2>多选题</h2>
                        </div>
                        <div class="rt_content_nr answerSheet answer2">
                            <ul>

                                <li><a href="#qu_2_0"></a></li>


                            </ul>
                        </div>
                    </div>

                    <div class="rt_content judge">
                        <div class="rt_content_tt">
                            <h2>判断题</h2>
                        </div>
                        <div class="rt_content_nr answerSheet answer3">
                            <ul>

                                <li><a href="#qu_3_0"></a></li>


                            </ul>
                        </div>
                    </div>

                    <div class="rt_content blanks">
                        <div class="rt_content_tt">
                            <h2>填空题</h2>
                        </div>
                        <div class="rt_content_nr answerSheet answer4">
                            <ul>

                                <li><a href="#qu_4_0"></a></li>


                            </ul>
                        </div>
                    </div>

                    <div class="rt_content objective">
                        <div class="rt_content_tt">
                            <h2>客观题</h2>
                            <%--<p>--%>
                            <%--<span>共</span><i class="content_lit">60</i><span>题</span>--%>
                            <%--</p>--%>
                        </div>
                        <div class="rt_content_nr answerSheet answer5">
                            <ul>

                                <li><a href="#qu_5_0"></a></li>

                            </ul>
                        </div>
                    </div>


                </div>

            </div>
        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>
</div>

<script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
<script src="/js/exam/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<%--<script src="/js/exam/jquery.countdown.js"></script>--%>
<script>
    var zmarr=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R'];
    var zmIndex=0;
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    var pId=GetQueryString('pId')
    var uid=GetQueryString('uId')
    var scoreId=GetQueryString('scoreId')
    var data;
    if(uid==''||uid==undefined){
        data={
            pid:pId,
            scoreId:scoreId
        }
    }else{
        data={
            pid:pId,
            uid:uid,
            scoreId:scoreId
        }
    }
    $(function() {
        $.ajax({
            url:'/exaExamination/selectByPid',
            data:data,
            dataType:'json',
            type:'get',
            success:function (res) {
                var data=res.object
                $('.grade').html(data.resTotle+'('+function () {
                        if(data.resTotle <data.passingScore){
                            return '未通过'
                        }else if(data.resTotle>=data.passingScore){
                            return '通过'
                        }
                    }()+')')
                $('.time').html(data.joinTime)
                //单选
                var list1='';
                var answer1='';
                if(res.object.list1!=undefined)
                for(var i=0;i<res.object.list1.length;i++) {
                    var data = res.object.list1;
                    var str=new String();
                    var arr=new Array();
                    str=data[i].exaQuestions.option
                    arr=str.split(';');//注split可以用字符或字符串分割

                    list1 += '<li id="qu_0_' + [i] + '">' +
                        '<div class="test_content_nr_tt">' +
                        ' <i>' + [i+1] + '</i><span>('+[data[i].scoreNum]+'分)</span><font>' + data[i].exaQuestions.eqSubject + '（  ）</font>' + function () {
                            if (data[i].exaQuestions.answer == data[i].answer) {
                                return '<span class="layui-icon layui-icon-ok" style="font-size: 30px; color: green;"></span>'
                            } else {
                                return '<span class="layui-icon layui-icon-close" style="font-size: 30px; color: red;"></span>正确答案：' + data[i].exaQuestions.answer + ''
                            }
                        }() +
                        ' </div>' +
                        ' <div class="test_content_nr_main">' +
                        ' <ul>' + function(){
                            var str=''
                            zmIndex=0
                            for(var j=0;j<arr.length;j++){

                                if(arr[j]!=''){
                                    str += ' <li class="option">' +
                                        ' <input type="radio" class="radioOrCheck" name="answer'+[i]+'" id="0_answer_1_option_1" '+function () {
                                            if(data[i].answer==arr[j].substring(1,0)){
                                                    return 'checked'
                                                }
                                        }()+'/>' +
                                        ' <label for="0_answer_1_option_1"><p class="ue" style="display: inline;">'+arr[j]+'</p> </label>' +
                                        '</li>'
                                    zmIndex++;
                                }
                            }
                            return str;
                        }() +' </ul>' +
                        ' </div>' +
                        '</li>';

                    answer1+='<li><a href="#qu_0_' + [i] + '">'+[i+1]+'</a></li>';


                }
                $('.list1 ul').html(list1)
                $('.answer1 ul').html(answer1)
                if(res.object.list1 = '' || res.object.list1.length <=0){
                    $('#single').hide()
                    $('.single').hide()
                }

                //多选题
                var list2='';
                var answer2='';
                if(res.object.list2!=undefined)
                for(var i=0;i<res.object.list2.length;i++) {
                    var data = res.object.list2;
                    var str=new String();
                    var arr=new Array();
                    str=data[i].exaQuestions.option
                    arr=str.split(';');//注split可以用字符或字符串分割
                    list2 += '<li id="qu_1_' + [i] + '">' +
                        '<div class="test_content_nr_tt">' +
                        ' <i>' + [i+1] + '</i><span>('+[data[i].scoreNum]+'分)</span><font>' + data[i].exaQuestions.eqSubject + '（  ）</font>' + function () {
                        if (data[i].answer.replace(/\*/g,',').substring(0,data[i].answer.length-1)==data[i].exaQuestions.answer) {
                                return '<span class="layui-icon layui-icon-ok" style="font-size: 30px; color: green;"></span>'
                            } else {
                                return '<span class="layui-icon layui-icon-close" style="font-size: 30px; color: red;"></span>正确答案：' + data[i].exaQuestions.answer + ''
                            }
                        }() +
                        ' </div>' +
                        ' <div class="test_content_nr_main">' +
                        ' <ul>' +function(){
                        var str=''
                            zmIndex=0
                            for(var j=0;j<arr.length;j++){
                                if(arr[j]!=''){
                                    str += ' <li class="option">' +
                                        ' <input type="checkbox" class="radioOrCheck" value="'+zmarr[zmIndex]+'"  name="answer'+[i]+'" id="1_answer_1_option_1" '+function () {
                                            if(data[i].answer.indexOf(zmarr[zmIndex])>=0){
                                                return 'checked'
                                            }
                                        }()+'/>' +
                                        ' <label for="1_answer_1_option_1"><p class="ue" style="display: inline;">'+arr[j]+'</p> </label>' +
                                        '</li>'
                                    zmIndex++;
                                }


                            }
                            return str;
                        }()
                        +' </ul>' +
                        ' </div>' +
                        '</li>';
                     answer2+='<li><a href="#qu_1_'+[i]+'">'+[i+1]+'</a></li>';
                }
                $('.list2 ul').html(list2)
                $('.answer2 ul').html(answer2)
                if(res.object.list2 = '' || res.object.list2.length <=0){
                    $('#multiple').hide()
                    $('.multiple').hide()
                }
                //判断
                var list3='';
                var answer3='';
                if(res.object.list3!=undefined)
                for(var i=0;i<res.object.list3.length;i++) {
                    var data = res.object.list3;
                    list3+='<li id="qu_2_'+[i]+'">'+
                        '<div class="test_content_nr_tt">'+
                        ' <i>' + [i+1] + '</i><span>('+[data[i].scoreNum]+'分)</span><font>' + data[i].exaQuestions.eqSubject + '（ '+function(){
                        if(data[i].answer == "0"){
                            return '对'
                        } else if(data[i].answer == "1"){
                            return '错'
                        } else {
                            return '';
                        }
                        }()+' ）</font> '+ function () {
                            var answer=''
                            if(data[i].exaQuestions.answer == "0"){
                                answer= '对'
                            } else if (data[i].exaQuestions.answer == "1"){
                                answer= '错'
                            } else {
                                return '';
                            }
                            if (data[i].exaQuestions.answer == data[i].answer) {
                                return '<span class="layui-icon layui-icon-ok" style="font-size: 30px; color: green;"></span>'
                            } else {
                                return '<span class="layui-icon layui-icon-close" style="font-size: 30px; color: red;"></span>正确答案：'+answer+''
                            }

                        }() +
                        ' </div>'+
                        '</li>';
                    answer3+='<li><a href="#qu_2_'+[i]+'">'+[i+1]+'</a></li>';
                }
                $('.list3 ul').html(list3);
                $('.answer3 ul').html(answer3)
                if(res.object.list3 = '' || res.object.list3.length <=0){
                    $('#judge').hide()
                    $('.judge').hide()
                }
                //填空题
                var list4='';
                var answer4='';
                if(res.object.list4!=undefined)
                for(var i=0;i<res.object.list4.length;i++) {
                    var data = res.object.list4;
                    list4+='<li id="qu_3_'+[i]+'">'+
                        '<div class="test_content_nr_tt">'+
                        ' <i>' + [i+1] + '</i><span>('+[data[i].scoreNum]+'分)</span><font>' + data[i].exaQuestions.eqSubject + ' &emsp;<input type="text" width="100px" value='+data[i].answer+' style="border: none;border-bottom: 1px solid;"  /></font> '+ function () {
                            if (data[i].exaQuestions.answer == data[i].answer) {
                                return '<span class="layui-icon layui-icon-ok" style="font-size: 30px; color: green;"></span>'
                            } else {
                                return '<span class="layui-icon layui-icon-close" style="font-size: 30px; color: red;"></span>正确答案：' + data[i].exaQuestions.answer + ''
                            }

                        }() +
                        ' </div>'+
                        '</li>';
                    answer4+='<li><a href="#qu_3_'+[i]+'">'+[i+1]+'</a></li>';
                }
                $('.list4 ul').html(list4);
                $('.answer4 ul').html(answer4)
                if(res.object.list4 = '' || res.object.list4.length <=0){
                    $('#blanks').hide()
                    $('.blanks').hide()
                }
                //客观题
                var list5='';
                var answer5='';
                if(res.object.list5!=undefined)
                for(var i=0;i<res.object.list5.length;i++) {
                    var data = res.object.list5;
                    list5+='<li id="qu_4_'+[i]+'">'+
                        '<div class="test_content_nr_tt">'+
                        ' <i>' + [i+1] + '</i><span>('+[data[i].scoreNum]+'分)</span><font>' + data[i].exaQuestions.eqSubject + '</font> '+ function () {
                            // if (data[i].exaQuestions.answer == data[i].answer) {
                            //     return '<span class="layui-icon layui-icon-ok" style="font-size: 30px; color: green;"></span>'
                            // } else {
                                return '   正确答案：' + data[i].exaQuestions.answer + ''
                            // }

                        }() +
                        '<textarea style="width: 100%;height: 100px">'+data[i].answer+'</textarea>'+
                        ' </div>'+
                        '</li>';
                    answer5+='<li><a href="#qu_4_'+[i]+'">'+[i+1]+'</a></li>';
                }
                $('.list5 ul').html(list5)
                $('.answer5 ul').html(answer5)
                if(res.object.list5 = '' || res.object.list5.length <=0){
                    $('#objective').hide()
                    $('.objective').hide()
                }
                $('input').attr('disabled','disabled')
            }
        })
    });
</script>

</body>
</html>
